<header-component tagline="文档"></header-component>
<div style="width:500px">
    <ng2-first-tree [data]='treedata' [settings]='settings' (nodeClick)="nodeClick($event)" (nodeMenuClick)="nodeMenuClick($event)"></ng2-first-tree>
    
</div>

<section class="main-content">
    <h3><a id="inputs" class="anchor" href="#configuration" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>组件输入</h3>

    <table>
        <tr>
            <th>输入</th>
            <th>Type</th>
            <th>描述</th>
        </tr>
        <tr>
            <td>[settings]</td>
            <td><span class="highlight">Object</span></td>
            <td>表组件配置对象，属性描述如下</td>
        </tr>
        <tr>
            <td>[source]</td>
            <td><span class="highlight">Array</span></td>
            <td>树数据，数组</td>
        </tr>
    </table>
    <h3><a id="configuration" class="anchor" href="#configuration" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>树配置</h3>

    <table>
        <thead>
            <tr>
                <th>属性</th>
                <th>Type</th>
                <th>默认</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>menuDatas</td>
                <td>数组</td>
                <td>空数组</td>
                <td>右键菜单的数据结构，menuDatas: [
                    {{left}}title: 'add', text: '新增'{{right}},
                    {{left}}title: 'edit', text: '修改'{{right}},
                  ],
                </td>
            </tr>
            <tr>
                <td>showicon</td>
                <td>string</td>
                <td>`icon ion-filing`</td>
                <td>子节点展开时的图标， showicon：`icon ion-filing`
                </td>
            </tr>
            <tr>
                <td>hideicon</td>
                <td>string</td>
                <td>`icon ion-folder`</td>
                <td>子节点隐藏时的图标， hideicon：`icon ion-folder`
                </td>
            </tr>
            <tr>
                <td>noChildicon</td>
                <td>string</td>
                <td>`icon ion-document-text`</td>
                <td>没有子节点时的图标， wenjicon：`icon ion-document-text`
                </td>
            </tr>
            <tr>
                <td>filter</td>
                <td>object</td>
                <td>filter: {{left}} type: '', class: '', isShow: false, {{right}}</td>
                <td>控制搜索框的显示隐藏
                </td>
            </tr>
            <tr>
                <td>selectBgc</td>
                <td>object</td>
                <td>selectBgc: {{left}} open: true, bgc:'#00abff', lv1: false, {{right}}</td>
                <td>控制选中背景色的启用，颜色，第一级是否启用
                </td>
            </tr>
        </tbody>
    </table>
    <h3><a id="configuration" class="anchor" href="#configuration" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>树数据</h3>

    <table>
        <thead>
            <tr>
                <th>属性</th>
                <th>Type</th>
                <th>默认</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>text</td>
                <td>string</td>
                <td>必填</td>
                <td>在界面上显示的文字，text:"学校"</td>
            </tr>
            <tr>
                <td>treeheight</td>
                <td>number</td>
                <td>必填</td>
                <td>用来控制是第几级节点，treeheight:1</td>
            </tr>
            <tr>
                <td>co</td>
                <td>Boolean</td>
                <td>必填</td>
                <td>用来控制是否展开子节点，co:true</td>
            </tr>
            <tr>
                <td>children</td>
                <td>数组</td>
                <td>无默认，没子节点就为空</td>
                <td>子节点数据结构，内部数据结构跟上述结构相同</td>
            </tr>
            <tr>
                <td colspan="4">数据内的属性可根据需要自行添加，所有属性在点击事件的event对象里都能获取到</td>
            </tr>
        </tbody>
    </table>
    <h3><a id="inputs" class="anchor" href="#configuration" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>组件输出事件</h3>
    
        <table>
            <tr>
                <th>事件名</th>
                <th>Type</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>nodeClick</td>
                <td><span class="highlight">function</span></td>
                <td>节点单击事件，返回值：当前点击的节点数据</td>
            </tr>
            <tr>
                <td>nodeDblClick</td>
                <td><span class="highlight">function</span></td>
                <td>节点双击事件，返回值：当前点击的节点数据</td>
            </tr>
            <tr>
                <td>nodeMenuClick</td>
                <td><span class="highlight">function</span></td>
                <td>右键菜单上的单击事件，返回值：右键点击的节点数据，菜单的title</td>
            </tr>
            <tr>
                <td>searchEvent</td>
                <td><span class="highlight">function</span></td>
                <td>搜索按钮单击事件，返回值：搜索框内的值</td>
            </tr>
            <tr>
                <td>allFolded</td>
                <td><span class="highlight">function</span></td>
                <td>全部折叠事件，返回值：tree所有的数据</td>
            </tr>
            <tr>
                <td>allExpansion</td>
                <td><span class="highlight">function</span></td>
                <td>全部展开事件，返回值：tree所有的数据</td>
            </tr>
        </table>
</section>